import React, { useState } from "react";
import "./App.css";
import CustomTitleBar from "./components/CustomTitleBar";
import Navigation from "./components/Navigation";
import RedeemCode from "./components/RedeemCode";

const App: React.FC = () => {
  const [isRedeeming, setIsRedeeming] = useState(false);

  const handleStatusChange = (status: "redeeming" | "normal") => {
    console.log("Status changed:", status);
    setIsRedeeming(status === "redeeming");
  };
  return (
    <div className="app">
      <CustomTitleBar showText={isRedeeming} />
      <Navigation />
      <main className="main-content">
          <div className="container" style={{width: "920px"}}>
              <RedeemCode onStatusChange={handleStatusChange} />
          </div>
      </main>
    </div>
  );
};

export default App;
